import { Component, OnInit } from '@angular/core';
import {Path} from "../../../../portal/admin/admin-breadcrumb/breadcrumb";
import {PageSubject} from "../../../../util/page-subject";
import {AssociationMiningService} from "./association-mining.service";
import {OneDialogService} from "../../../../widgets/one-dialog/one-dialog.service";
import {ResponseUtil} from "../../../../util/response-util";
import {MsgResult} from "../../../../models/msg-result";
import {MsgConstants} from "../../../../constants/constants";
import {TableUtil} from "../../../../util/table-util";

declare var $;
declare var moment;
declare var echarts;

@Component({
  selector: 'app-association-mining',
  templateUrl: './association-mining.component.html',
  styleUrls: ['./association-mining.component.css']
})
export class AssociationMiningComponent implements OnInit {
  config;table;
  regionCodeType:any;
  nationalSite:Array<any>=[];
  provinceSite:Array<any>=[];
  smallSite:Array<any>=[];
  constructor(
    private pageSubject : PageSubject,
    private AssociationMiningService : AssociationMiningService,
    private responseUtil :ResponseUtil,
    private dialogService: OneDialogService,
    private tableUtil:TableUtil,
  ) { }

  ngOnInit() {
    this.pushPage();
    this.getRegionList();
    this.siteButtonData();
  }

  //面包屑导航
  pushPage() {
    let path = new Path("数据研判", "");
    this.pageSubject.pushPage("关联挖掘", "", path);
  }

  //   站点按钮数据
  siteButtonData(){
    this.AssociationMiningService.getUserSiteData().subscribe(
      result => this.responseUtil.success(result,this.siteButtonDataResult),
      message => this.responseUtil.error(message)
    );
  }
  private siteButtonDataResult = (result: MsgResult) =>{
    if (result && result.code == MsgConstants.MSG_CODE_OK) {
      this.siteButtonDataDataTree(result.data);
    }
    if (result && result.code != MsgConstants.MSG_CODE_OK) {
      this.dialogService.info(result.message);
    }
  }
  //站点按钮
  siteButtonDataDataTree(data){
    let siteHtml = "";
    let localSite = [
      {"name":"nationalSite","type":"national","chinese":"国控站"},
      {"name":"provinceSite","type":"province","chinese":"省控站"},
      {"name":"smallAirSite","type":"smallAir","chinese":"微型站"}
    ];
    $.each(localSite,function (j,siteList) {
      $.each(data,function (i,list) {
        if(list==siteList.name){
          siteHtml+='<div class="btn btn-default" id="'+siteList.name+'" data-type="'+siteList.type+'">'+siteList.chinese+'</div>';
        }
      });
    });
    console.log(siteHtml);
    if(siteHtml){
      $(".user_site_button").html(siteHtml);
      $(".user_site_button").find(".btn:first").addClass("active");
      this.initBtnStyle();
      this.initBtnEvent();

      this.initTime();
      this.initEvent();
    }else{
      $(".one-data-loadState").hide();
      $(".user_zong").html("暂无数据");
    }

  };

  //选择城市
  getRegionList(){
    this.AssociationMiningService.getregionCodeData().subscribe(
      result => this.responseUtil.success(result,this.getregionCodeDataResult),
      message => this.responseUtil.error(message)
    );
  }
  private getregionCodeDataResult = (result: MsgResult) =>{
    if (result && result.code == MsgConstants.MSG_CODE_OK) {
      this.dropDownCityData2(result.data);
    }
    if (result && result.code != MsgConstants.MSG_CODE_OK) {
      this.dialogService.info(result.message);
    }
  }
  //城市列表
  dropDownCityData2(data){
    let dataHtml = "";
    $.each(data, function (i, list) {
      dataHtml += '<li id="' + list.regionCode + '">' + list.regionName + '</li>';
    });
    $(".user_dropdown-menu_city ul").html(dataHtml);
    $(".user_dropdown-menu_city ul li").click(function (e) {
      $(".upload_city").val($(e.target).html());
      let siteId = $(e.target).attr("id");
      $(".user_dropdown-menu_city").hide();
      this.regionCodeType =siteId;
      console.log(this.regionCodeType);
      this.getRegionListData();
    }.bind(this))
  }

  //   站点列表数据
  getRegionListData(){
    this.AssociationMiningService.getRegionListData(this.regionCodeType).subscribe(
      result => this.responseUtil.success(result,this.getRegionListDataResult),
      message => this.responseUtil.error(message)
    );
  }
  private getRegionListDataResult = (result: MsgResult) =>{
    if (result && result.code == MsgConstants.MSG_CODE_OK) {
      this.getRegionListDataTree(result.data);
    }
    if (result && result.code != MsgConstants.MSG_CODE_OK) {
      this.dialogService.info(result.message);
    }
  }
  //站点列表
  getRegionListDataTree(data){
    this.nationalSite=[];
    this.provinceSite=[];
    this.smallSite=[];
    $.each(data,function (i,dropDatas) {
      if(dropDatas.siteTypeCode=="001"){
        this.nationalSite.push({"siteCode":dropDatas.siteCode,"siteName":dropDatas.siteName});
      }else if(dropDatas.siteTypeCode=="002"){
        this.provinceSite.push({"siteCode":dropDatas.siteCode,"siteName":dropDatas.siteName});
      }else if(dropDatas.siteTypeCode=="004"){
        this.smallSite.push({"siteCode":dropDatas.siteCode,"siteName":dropDatas.siteName});
      }
    }.bind(this));



  }

  //按钮样式
  initBtnStyle(){
    //改变input样式
    $('input').iCheck({
      checkboxClass: 'icheckbox_minimal-green',
      radioClass: 'iradio_minimal-green',
      increaseArea: '20%' // optional
    });
    //按钮点击事件
    $(".btn-group .btn:not(.btn-disabled)").click(function(){
      $(this).addClass("active").siblings(".active").removeClass("active");
    });

    //点击站点列表
    $(".dropdown").click(function(){
      $(this).find(".dropdown-menu").show();
    }).mouseleave(function(){
      $(this).find(".dropdown-menu").hide();
    });


    //点击站点列表中的删除图标
    $(".one-inline-container").on("click",".btn>.glyphicon-remove",function(){
      $(this).parent().remove();
      if($(".one-inline-container>.btn").length<5){
        $('.list-inline input').iCheck('enable');
      }else{
        $('.list-inline .icheckbox_minimal-green:not(.checked) input').iCheck('disable');
      }
      var btnId = $(this).parent().attr("id");
      $(".dropdown-menu label").each(function(){
        var  id = $(this).find("input").attr("id");
        if( btnId == id){
          $(this).find("input").iCheck('uncheck');
        }
      });
    });
  }

  //联动框点击事件
  initBtnEvent(){
    $(".glyphicon-remove").click(function (event) {
      event=event?event:window.event;
      event.stopPropagation();
    })
    //点击站点类型
    $(".dropdown-menu>.one-btn-data-type").on("click",".btn",function(){
      $(this).addClass("active").siblings(".active").removeClass("active");
      var id = $(this).data("type");
      $("#"+id).show().siblings(".list-inline").hide();
    });

    //查询站点
    $("#search-site").bind("input propertychange",function () {
      let searchSiteVal = $("#search-site").val();
      if(searchSiteVal){
        $(".dropdown-menu label").each(function(){
          var text = $(this).text();
          if(text.indexOf(searchSiteVal)!=-1){
            $(this).parent().show();
          }else{
            $(this).parent().hide();
          }
        })
      }else{
        $(".dropdown-menu label").parent().show();
      }
    })
  }

  //复选框点击
  inputClick(siteCode,name,even){
    let aa=$(even.target).is(":checked");
    if(aa){
      $(".one-inline-container").append('<div class="btn btn-success" id='+siteCode+'>'+name+' <i class="glyphicon glyphicon-remove"></i></div>');
    }else{
      $(".one-inline-container").find("#"+siteCode).remove();
    }
  }

  initEvent(){
    $(".btn-group .btn-default").click(function () {
      $(this).addClass("active").siblings().removeClass("active");
    })

  //点击站点列表
  $(".dropdown").click(function(){
    $(this).find(".dropdown-menu").show();
  }).mouseleave(function () {
    $(this).find(".dropdown-menu").hide();
  });


//PM2.5-PM10
$(".user_pm25pm10").click(function () {
  $(".user_select").hide();
  var pm25pm10Data = {
    "text":["PM2.5","PM10"],
    "series":[
      {'time':moment().format("YYYY-MM-DD")+" 01:00","value1":30,"value2":80},
      {'time':moment().format("YYYY-MM-DD")+" 02:00","value1":40,"value2":92},
      {'time':moment().format("YYYY-MM-DD")+" 03:00","value1":52,"value2":113},
      {'time':moment().format("YYYY-MM-DD")+" 04:00","value1":64,"value2":140},
      {'time':moment().format("YYYY-MM-DD")+" 05:00","value1":72,"value2":162},
      {'time':moment().format("YYYY-MM-DD")+" 06:00","value1":80,"value2":182},
      {'time':moment().format("YYYY-MM-DD")+" 07:00","value1":90,"value2":200},
      {'time':moment().format("YYYY-MM-DD")+" 08:00","value1":80,"value2":180},
      {'time':moment().format("YYYY-MM-DD")+" 09:00","value1":78,"value2":170},
      {'time':moment().format("YYYY-MM-DD")+" 10:00","value1":62,"value2":162},
      {'time':moment().format("YYYY-MM-DD")+" 11:00","value1":58,"value2":92},
      {'time':moment().format("YYYY-MM-DD")+" 12:00","value1":64,"value2":142},
      {'time':moment().format("YYYY-MM-DD")+" 13:00","value1":43,"value2":98},
      {'time':moment().format("YYYY-MM-DD")+" 14:00","value1":48,"value2":99},
      {'time':moment().format("YYYY-MM-DD")+" 15:00","value1":45,"value2":94},
      {'time':moment().format("YYYY-MM-DD")+" 16:00","value1":41,"value2":85},
      {'time':moment().format("YYYY-MM-DD")+" 17:00","value1":58,"value2":120},
      {'time':moment().format("YYYY-MM-DD")+" 08:30","value1":60,"value2":145},
      {'time':moment().format("YYYY-MM-DD")+" 01:30","value1":33,"value2":84},
      {'time':moment().format("YYYY-MM-DD")+" 02:30","value1":54,"value2":112},
      {'time':moment().format("YYYY-MM-DD")+" 03:30","value1":55,"value2":115},
      {'time':moment().format("YYYY-MM-DD")+" 04:30","value1":56,"value2":119},
      {'time':moment().format("YYYY-MM-DD")+" 05:30","value1":57,"value2":121},
      {'time':moment().format("YYYY-MM-DD")+" 06:30","value1":58,"value2":114},
      {'time':moment().format("YYYY-MM-DD")+" 07:30","value1":59,"value2":123},
      {'time':moment().format("YYYY-MM-DD")+" 08:30","value1":52,"value2":111},
      {'time':moment().format("YYYY-MM-DD")+" 09:30","value1":44,"value2":98},
      {'time':moment().format("YYYY-MM-DD")+" 10:30","value1":45,"value2":102},
      {'time':moment().format("YYYY-MM-DD")+" 11:30","value1":56,"value2":113},
    ]
  };
  this.echarts(pm25pm10Data);
}.bind(this))

//PM2.5-湿度
  $(".user_pm25shi").click(function () {
    $(".user_select").hide();
    var user_pm25shi = {
      "text":["PM2.5","湿度"],
      "series":[
        {'time':moment().format("YYYY-MM-DD")+" 01:00","value1":30,"value2":80},
        {'time':moment().format("YYYY-MM-DD")+" 02:00","value1":40,"value2":92},
        {'time':moment().format("YYYY-MM-DD")+" 03:00","value1":52,"value2":113},
        {'time':moment().format("YYYY-MM-DD")+" 04:00","value1":64,"value2":140},
        {'time':moment().format("YYYY-MM-DD")+" 05:00","value1":72,"value2":162},
        {'time':moment().format("YYYY-MM-DD")+" 06:00","value1":80,"value2":102},
        {'time':moment().format("YYYY-MM-DD")+" 07:00","value1":90,"value2":150},
        {'time':moment().format("YYYY-MM-DD")+" 08:00","value1":80,"value2":130},
        {'time':moment().format("YYYY-MM-DD")+" 09:00","value1":78,"value2":170},
        {'time':moment().format("YYYY-MM-DD")+" 10:00","value1":62,"value2":162},
        {'time':moment().format("YYYY-MM-DD")+" 11:00","value1":58,"value2":92},
        {'time':moment().format("YYYY-MM-DD")+" 12:00","value1":64,"value2":142},
        {'time':moment().format("YYYY-MM-DD")+" 13:00","value1":43,"value2":98},
        {'time':moment().format("YYYY-MM-DD")+" 14:00","value1":48,"value2":99},
        {'time':moment().format("YYYY-MM-DD")+" 15:00","value1":45,"value2":94},
        {'time':moment().format("YYYY-MM-DD")+" 16:00","value1":41,"value2":85},
        {'time':moment().format("YYYY-MM-DD")+" 17:00","value1":58,"value2":120},
        {'time':moment().format("YYYY-MM-DD")+" 08:30","value1":60,"value2":145},
        {'time':moment().format("YYYY-MM-DD")+" 01:30","value1":33,"value2":84},
        {'time':moment().format("YYYY-MM-DD")+" 02:30","value1":54,"value2":112},
        {'time':moment().format("YYYY-MM-DD")+" 03:30","value1":55,"value2":115},
        {'time':moment().format("YYYY-MM-DD")+" 04:30","value1":56,"value2":119},
        {'time':moment().format("YYYY-MM-DD")+" 05:30","value1":57,"value2":121},
        {'time':moment().format("YYYY-MM-DD")+" 06:30","value1":58,"value2":114},
        {'time':moment().format("YYYY-MM-DD")+" 07:30","value1":59,"value2":123},
        {'time':moment().format("YYYY-MM-DD")+" 08:30","value1":52,"value2":111},
        {'time':moment().format("YYYY-MM-DD")+" 09:30","value1":44,"value2":98},
        {'time':moment().format("YYYY-MM-DD")+" 10:30","value1":45,"value2":102},
        {'time':moment().format("YYYY-MM-DD")+" 11:30","value1":56,"value2":113},
      ]
    };
    this.echarts(user_pm25shi);
  }.bind(this))
//PM2.5-风力
  $(".user_pm25wind").click(function () {
    $(".user_select").hide();
    var user_pm25wind = {
      "text":["PM2.5","风力"],
      "series":[
        {'time':moment().format("YYYY-MM-DD")+" 01:00","value1":30,"value2":80},
        {'time':moment().format("YYYY-MM-DD")+" 02:00","value1":40,"value2":92},
        {'time':moment().format("YYYY-MM-DD")+" 03:00","value1":52,"value2":113},
        {'time':moment().format("YYYY-MM-DD")+" 04:00","value1":64,"value2":100},
        {'time':moment().format("YYYY-MM-DD")+" 05:00","value1":72,"value2":162},
        {'time':moment().format("YYYY-MM-DD")+" 06:00","value1":80,"value2":182},
        {'time':moment().format("YYYY-MM-DD")+" 07:00","value1":90,"value2":252},
        {'time':moment().format("YYYY-MM-DD")+" 08:00","value1":80,"value2":190},
        {'time':moment().format("YYYY-MM-DD")+" 09:00","value1":78,"value2":180},
        {'time':moment().format("YYYY-MM-DD")+" 10:00","value1":62,"value2":162},
        {'time':moment().format("YYYY-MM-DD")+" 11:00","value1":58,"value2":92},
        {'time':moment().format("YYYY-MM-DD")+" 12:00","value1":64,"value2":142},
        {'time':moment().format("YYYY-MM-DD")+" 13:00","value1":43,"value2":98},
        {'time':moment().format("YYYY-MM-DD")+" 14:00","value1":48,"value2":99},
        {'time':moment().format("YYYY-MM-DD")+" 15:00","value1":45,"value2":94},
        {'time':moment().format("YYYY-MM-DD")+" 16:00","value1":41,"value2":85},
        {'time':moment().format("YYYY-MM-DD")+" 17:00","value1":58,"value2":120},
        {'time':moment().format("YYYY-MM-DD")+" 08:30","value1":60,"value2":145},
        {'time':moment().format("YYYY-MM-DD")+" 01:30","value1":33,"value2":84},
        {'time':moment().format("YYYY-MM-DD")+" 02:30","value1":54,"value2":112},
        {'time':moment().format("YYYY-MM-DD")+" 03:30","value1":55,"value2":115},
        {'time':moment().format("YYYY-MM-DD")+" 04:30","value1":56,"value2":119},
        {'time':moment().format("YYYY-MM-DD")+" 05:30","value1":57,"value2":121},
        {'time':moment().format("YYYY-MM-DD")+" 06:30","value1":58,"value2":114},
        {'time':moment().format("YYYY-MM-DD")+" 07:30","value1":59,"value2":123},
        {'time':moment().format("YYYY-MM-DD")+" 08:30","value1":52,"value2":111},
        {'time':moment().format("YYYY-MM-DD")+" 09:30","value1":44,"value2":98},
        {'time':moment().format("YYYY-MM-DD")+" 10:30","value1":45,"value2":102},
        {'time':moment().format("YYYY-MM-DD")+" 11:30","value1":56,"value2":113},
      ]
    };
    this.echarts(user_pm25wind);
  }.bind(this))
//PM2.5-O3
  $(".user_pm25o3").click(function () {
    $(".user_select").hide();
    var user_pm25o3 = {
      "text":["PM2.5","O3"],
      "series":[
        {'time':moment().format("YYYY-MM-DD")+" 01:00","value1":30,"value2":80},
        {'time':moment().format("YYYY-MM-DD")+" 02:00","value1":40,"value2":92},
        {'time':moment().format("YYYY-MM-DD")+" 03:00","value1":52,"value2":113},
        {'time':moment().format("YYYY-MM-DD")+" 04:00","value1":64,"value2":120},
        {'time':moment().format("YYYY-MM-DD")+" 05:00","value1":72,"value2":162},
        {'time':moment().format("YYYY-MM-DD")+" 06:00","value1":80,"value2":112},
        {'time':moment().format("YYYY-MM-DD")+" 07:00","value1":90,"value2":230},
        {'time':moment().format("YYYY-MM-DD")+" 08:00","value1":80,"value2":180},
        {'time':moment().format("YYYY-MM-DD")+" 09:00","value1":78,"value2":170},
        {'time':moment().format("YYYY-MM-DD")+" 10:00","value1":62,"value2":162},
        {'time':moment().format("YYYY-MM-DD")+" 11:00","value1":58,"value2":92},
        {'time':moment().format("YYYY-MM-DD")+" 12:00","value1":64,"value2":142},
        {'time':moment().format("YYYY-MM-DD")+" 13:00","value1":43,"value2":98},
        {'time':moment().format("YYYY-MM-DD")+" 14:00","value1":48,"value2":79},
        {'time':moment().format("YYYY-MM-DD")+" 15:00","value1":45,"value2":94},
        {'time':moment().format("YYYY-MM-DD")+" 16:00","value1":41,"value2":85},
        {'time':moment().format("YYYY-MM-DD")+" 17:00","value1":58,"value2":140},
        {'time':moment().format("YYYY-MM-DD")+" 08:30","value1":60,"value2":105},
        {'time':moment().format("YYYY-MM-DD")+" 01:30","value1":33,"value2":110},
        {'time':moment().format("YYYY-MM-DD")+" 02:30","value1":54,"value2":112},
        {'time':moment().format("YYYY-MM-DD")+" 03:30","value1":55,"value2":115},
        {'time':moment().format("YYYY-MM-DD")+" 04:30","value1":56,"value2":119},
        {'time':moment().format("YYYY-MM-DD")+" 05:30","value1":57,"value2":121},
        {'time':moment().format("YYYY-MM-DD")+" 06:30","value1":58,"value2":114},
        {'time':moment().format("YYYY-MM-DD")+" 07:30","value1":59,"value2":123},
        {'time':moment().format("YYYY-MM-DD")+" 08:30","value1":52,"value2":111},
        {'time':moment().format("YYYY-MM-DD")+" 09:30","value1":44,"value2":98},
        {'time':moment().format("YYYY-MM-DD")+" 10:30","value1":45,"value2":102},
        {'time':moment().format("YYYY-MM-DD")+" 11:30","value1":56,"value2":113},
      ]
    };
    this.echarts(user_pm25o3);
  }.bind(this))
//O3-NO2
  $(".user_o3no2").click(function () {
    $(".user_select").hide();
    var user_o3no2 = {
      "text":["O3","NO2"],
      "series":[
        {'time':moment().format("YYYY-MM-DD")+" 01:00","value1":30,"value2":80},
        {'time':moment().format("YYYY-MM-DD")+" 02:00","value1":40,"value2":92},
        {'time':moment().format("YYYY-MM-DD")+" 03:00","value1":52,"value2":113},
        {'time':moment().format("YYYY-MM-DD")+" 04:00","value1":64,"value2":140},
        {'time':moment().format("YYYY-MM-DD")+" 05:00","value1":72,"value2":192},
        {'time':moment().format("YYYY-MM-DD")+" 06:00","value1":80,"value2":182},
        {'time':moment().format("YYYY-MM-DD")+" 07:00","value1":90,"value2":260},
        {'time':moment().format("YYYY-MM-DD")+" 08:00","value1":80,"value2":180},
        {'time':moment().format("YYYY-MM-DD")+" 09:00","value1":78,"value2":170},
        {'time':moment().format("YYYY-MM-DD")+" 10:00","value1":62,"value2":162},
        {'time':moment().format("YYYY-MM-DD")+" 11:00","value1":58,"value2":92},
        {'time':moment().format("YYYY-MM-DD")+" 12:00","value1":64,"value2":172},
        {'time':moment().format("YYYY-MM-DD")+" 13:00","value1":43,"value2":98},
        {'time':moment().format("YYYY-MM-DD")+" 14:00","value1":48,"value2":99},
        {'time':moment().format("YYYY-MM-DD")+" 15:00","value1":45,"value2":94},
        {'time':moment().format("YYYY-MM-DD")+" 16:00","value1":41,"value2":85},
        {'time':moment().format("YYYY-MM-DD")+" 17:00","value1":58,"value2":120},
        {'time':moment().format("YYYY-MM-DD")+" 08:30","value1":60,"value2":185},
        {'time':moment().format("YYYY-MM-DD")+" 01:30","value1":33,"value2":84},
        {'time':moment().format("YYYY-MM-DD")+" 02:30","value1":54,"value2":112},
        {'time':moment().format("YYYY-MM-DD")+" 03:30","value1":60,"value2":115},
        {'time':moment().format("YYYY-MM-DD")+" 04:30","value1":56,"value2":119},
        {'time':moment().format("YYYY-MM-DD")+" 05:30","value1":57,"value2":101},
        {'time':moment().format("YYYY-MM-DD")+" 06:30","value1":58,"value2":114},
        {'time':moment().format("YYYY-MM-DD")+" 07:30","value1":59,"value2":123},
        {'time':moment().format("YYYY-MM-DD")+" 08:30","value1":52,"value2":111},
        {'time':moment().format("YYYY-MM-DD")+" 09:30","value1":44,"value2":98},
        {'time':moment().format("YYYY-MM-DD")+" 10:30","value1":45,"value2":102},
        {'time':moment().format("YYYY-MM-DD")+" 11:30","value1":56,"value2":113},
      ]
    };
    this.echarts(user_o3no2);
  }.bind(this))
//O3-温度
  $(".user_o3temp").click(function () {
    $(".user_select").hide();
    var user_o3temp = {
      "text":["O3","温度"],
      "series":[
        {'time':moment().format("YYYY-MM-DD")+" 01:00","value1":30,"value2":80},
        {'time':moment().format("YYYY-MM-DD")+" 02:00","value1":40,"value2":92},
        {'time':moment().format("YYYY-MM-DD")+" 03:00","value1":52,"value2":113},
        {'time':moment().format("YYYY-MM-DD")+" 04:00","value1":64,"value2":140},
        {'time':moment().format("YYYY-MM-DD")+" 05:00","value1":72,"value2":162},
        {'time':moment().format("YYYY-MM-DD")+" 06:00","value1":80,"value2":182},
        {'time':moment().format("YYYY-MM-DD")+" 07:00","value1":90,"value2":140},
        {'time':moment().format("YYYY-MM-DD")+" 08:00","value1":80,"value2":120},
        {'time':moment().format("YYYY-MM-DD")+" 09:00","value1":78,"value2":170},
        {'time':moment().format("YYYY-MM-DD")+" 10:00","value1":62,"value2":162},
        {'time':moment().format("YYYY-MM-DD")+" 11:00","value1":58,"value2":92},
        {'time':moment().format("YYYY-MM-DD")+" 12:00","value1":64,"value2":142},
        {'time':moment().format("YYYY-MM-DD")+" 13:00","value1":43,"value2":98},
        {'time':moment().format("YYYY-MM-DD")+" 14:00","value1":48,"value2":99},
        {'time':moment().format("YYYY-MM-DD")+" 15:00","value1":45,"value2":94},
        {'time':moment().format("YYYY-MM-DD")+" 16:00","value1":41,"value2":125},
        {'time':moment().format("YYYY-MM-DD")+" 17:00","value1":58,"value2":120},
        {'time':moment().format("YYYY-MM-DD")+" 08:30","value1":60,"value2":145},
        {'time':moment().format("YYYY-MM-DD")+" 01:30","value1":33,"value2":84},
        {'time':moment().format("YYYY-MM-DD")+" 02:30","value1":54,"value2":112},
        {'time':moment().format("YYYY-MM-DD")+" 03:30","value1":55,"value2":155},
        {'time':moment().format("YYYY-MM-DD")+" 04:30","value1":56,"value2":119},
        {'time':moment().format("YYYY-MM-DD")+" 05:30","value1":57,"value2":121},
        {'time':moment().format("YYYY-MM-DD")+" 06:30","value1":58,"value2":114},
        {'time':moment().format("YYYY-MM-DD")+" 07:30","value1":59,"value2":183},
        {'time':moment().format("YYYY-MM-DD")+" 08:30","value1":52,"value2":111},
        {'time':moment().format("YYYY-MM-DD")+" 09:30","value1":44,"value2":98},
        {'time':moment().format("YYYY-MM-DD")+" 10:30","value1":45,"value2":122},
        {'time':moment().format("YYYY-MM-DD")+" 11:30","value1":56,"value2":113},
      ]
    };
    this.echarts(user_o3temp);
  }.bind(this))
//O3-湿度
  $(".user_o3shi").click(function () {
    $(".user_select").hide();
    var user_o3shi = {
      "text":["O3","湿度"],
      "series":[
        {'time':moment().format("YYYY-MM-DD")+" 01:00","value1":30,"value2":80},
        {'time':moment().format("YYYY-MM-DD")+" 02:00","value1":40,"value2":92},
        {'time':moment().format("YYYY-MM-DD")+" 03:00","value1":52,"value2":153},
        {'time':moment().format("YYYY-MM-DD")+" 04:00","value1":64,"value2":140},
        {'time':moment().format("YYYY-MM-DD")+" 05:00","value1":72,"value2":162},
        {'time':moment().format("YYYY-MM-DD")+" 06:00","value1":80,"value2":172},
        {'time':moment().format("YYYY-MM-DD")+" 07:00","value1":90,"value2":210},
        {'time':moment().format("YYYY-MM-DD")+" 08:00","value1":80,"value2":180},
        {'time':moment().format("YYYY-MM-DD")+" 09:00","value1":78,"value2":170},
        {'time':moment().format("YYYY-MM-DD")+" 10:00","value1":62,"value2":102},
        {'time':moment().format("YYYY-MM-DD")+" 11:00","value1":58,"value2":92},
        {'time':moment().format("YYYY-MM-DD")+" 12:00","value1":64,"value2":142},
        {'time':moment().format("YYYY-MM-DD")+" 13:00","value1":43,"value2":98},
        {'time':moment().format("YYYY-MM-DD")+" 14:00","value1":48,"value2":99},
        {'time':moment().format("YYYY-MM-DD")+" 15:00","value1":45,"value2":94},
        {'time':moment().format("YYYY-MM-DD")+" 16:00","value1":41,"value2":85},
        {'time':moment().format("YYYY-MM-DD")+" 17:00","value1":58,"value2":140},
        {'time':moment().format("YYYY-MM-DD")+" 08:30","value1":60,"value2":145},
        {'time':moment().format("YYYY-MM-DD")+" 01:30","value1":33,"value2":84},
        {'time':moment().format("YYYY-MM-DD")+" 02:30","value1":54,"value2":102},
        {'time':moment().format("YYYY-MM-DD")+" 03:30","value1":55,"value2":115},
        {'time':moment().format("YYYY-MM-DD")+" 04:30","value1":56,"value2":119},
        {'time':moment().format("YYYY-MM-DD")+" 05:30","value1":57,"value2":121},
        {'time':moment().format("YYYY-MM-DD")+" 06:30","value1":58,"value2":114},
        {'time':moment().format("YYYY-MM-DD")+" 07:30","value1":59,"value2":123},
        {'time':moment().format("YYYY-MM-DD")+" 08:30","value1":52,"value2":111},
        {'time':moment().format("YYYY-MM-DD")+" 09:30","value1":44,"value2":98},
        {'time':moment().format("YYYY-MM-DD")+" 10:30","value1":45,"value2":102},
        {'time':moment().format("YYYY-MM-DD")+" 11:30","value1":56,"value2":113},
      ]
    };
    this.echarts(user_o3shi);
  }.bind(this))
//自定义
  $(".user_user").click(function () {
    $(".user_select").show();
    var pm25pm10Data = {
      "text":[$(".select1").val(),$(".select2").val()],
      "series":[
        {'time':moment().format("YYYY-MM-DD")+" 01:00","value1":30,"value2":80},
        {'time':moment().format("YYYY-MM-DD")+" 02:00","value1":40,"value2":92},
        {'time':moment().format("YYYY-MM-DD")+" 03:00","value1":52,"value2":113},
        {'time':moment().format("YYYY-MM-DD")+" 04:00","value1":64,"value2":140},
        {'time':moment().format("YYYY-MM-DD")+" 05:00","value1":72,"value2":180},
        {'time':moment().format("YYYY-MM-DD")+" 06:00","value1":80,"value2":112},
        {'time':moment().format("YYYY-MM-DD")+" 07:00","value1":90,"value2":220},
        {'time':moment().format("YYYY-MM-DD")+" 08:00","value1":80,"value2":180},
        {'time':moment().format("YYYY-MM-DD")+" 09:00","value1":78,"value2":170},
        {'time':moment().format("YYYY-MM-DD")+" 10:00","value1":62,"value2":102},
        {'time':moment().format("YYYY-MM-DD")+" 11:00","value1":58,"value2":92},
        {'time':moment().format("YYYY-MM-DD")+" 12:00","value1":64,"value2":142},
        {'time':moment().format("YYYY-MM-DD")+" 13:00","value1":43,"value2":98},
        {'time':moment().format("YYYY-MM-DD")+" 14:00","value1":48,"value2":99},
        {'time':moment().format("YYYY-MM-DD")+" 15:00","value1":45,"value2":120},
        {'time':moment().format("YYYY-MM-DD")+" 16:00","value1":41,"value2":130},
        {'time':moment().format("YYYY-MM-DD")+" 17:00","value1":58,"value2":120},
        {'time':moment().format("YYYY-MM-DD")+" 08:30","value1":60,"value2":145},
        {'time':moment().format("YYYY-MM-DD")+" 01:30","value1":33,"value2":84},
        {'time':moment().format("YYYY-MM-DD")+" 02:30","value1":54,"value2":112},
        {'time':moment().format("YYYY-MM-DD")+" 03:30","value1":55,"value2":115},
        {'time':moment().format("YYYY-MM-DD")+" 04:30","value1":56,"value2":119},
        {'time':moment().format("YYYY-MM-DD")+" 05:30","value1":57,"value2":101},
        {'time':moment().format("YYYY-MM-DD")+" 06:30","value1":58,"value2":114},
        {'time':moment().format("YYYY-MM-DD")+" 07:30","value1":59,"value2":123},
        {'time':moment().format("YYYY-MM-DD")+" 08:30","value1":52,"value2":111},
        {'time':moment().format("YYYY-MM-DD")+" 09:30","value1":44,"value2":98},
        {'time':moment().format("YYYY-MM-DD")+" 10:30","value1":45,"value2":102},
        {'time':moment().format("YYYY-MM-DD")+" 11:30","value1":56,"value2":113},
      ]
    };
    this.echarts(pm25pm10Data);
  }.bind(this))
//查询
  $(".search").click(function () {
    var pm25pm10Data = {
      "text":[$(".select1").val(),$(".select2").val()],
      "series":[
        {'time':moment().format("YYYY-MM-DD")+" 01:00","value1":30,"value2":80},
        {'time':moment().format("YYYY-MM-DD")+" 02:00","value1":40,"value2":92},
        {'time':moment().format("YYYY-MM-DD")+" 03:00","value1":52,"value2":113},
        {'time':moment().format("YYYY-MM-DD")+" 04:00","value1":64,"value2":140},
        {'time':moment().format("YYYY-MM-DD")+" 05:00","value1":72,"value2":162},
        {'time':moment().format("YYYY-MM-DD")+" 06:00","value1":80,"value2":182},
        {'time':moment().format("YYYY-MM-DD")+" 07:00","value1":90,"value2":200},
        {'time':moment().format("YYYY-MM-DD")+" 08:00","value1":80,"value2":180},
        {'time':moment().format("YYYY-MM-DD")+" 09:00","value1":78,"value2":170},
        {'time':moment().format("YYYY-MM-DD")+" 10:00","value1":62,"value2":162},
        {'time':moment().format("YYYY-MM-DD")+" 11:00","value1":58,"value2":92},
        {'time':moment().format("YYYY-MM-DD")+" 12:00","value1":64,"value2":142},
        {'time':moment().format("YYYY-MM-DD")+" 13:00","value1":43,"value2":98},
        {'time':moment().format("YYYY-MM-DD")+" 14:00","value1":48,"value2":99},
        {'time':moment().format("YYYY-MM-DD")+" 15:00","value1":45,"value2":94},
        {'time':moment().format("YYYY-MM-DD")+" 16:00","value1":41,"value2":85},
        {'time':moment().format("YYYY-MM-DD")+" 17:00","value1":52,"value2":120},
        {'time':moment().format("YYYY-MM-DD")+" 08:30","value1":60,"value2":145},
        {'time':moment().format("YYYY-MM-DD")+" 01:30","value1":33,"value2":84},
        {'time':moment().format("YYYY-MM-DD")+" 02:30","value1":54,"value2":112},
        {'time':moment().format("YYYY-MM-DD")+" 03:30","value1":55,"value2":115},
        {'time':moment().format("YYYY-MM-DD")+" 04:30","value1":56,"value2":119},
        {'time':moment().format("YYYY-MM-DD")+" 05:30","value1":45,"value2":80},
        {'time':moment().format("YYYY-MM-DD")+" 06:30","value1":80,"value2":160},
        {'time':moment().format("YYYY-MM-DD")+" 07:30","value1":68,"value2":140},
        {'time':moment().format("YYYY-MM-DD")+" 08:30","value1":75,"value2":121},
        {'time':moment().format("YYYY-MM-DD")+" 09:30","value1":85,"value2":180},
        {'time':moment().format("YYYY-MM-DD")+" 10:30","value1":100,"value2":220},
        {'time':moment().format("YYYY-MM-DD")+" 11:30","value1":36,"value2":83},
      ]
    };
    this.echarts(pm25pm10Data);
  }.bind(this))

  //表格
$(".user_table").click(function () {
  let tableObj = [
    {
      "type":"综合指数",
      "zong":"1.00",
      "pm25":"0.86",
      "pm10":"0.93",
      "co":"0.60",
      "no2":"0.64",
      "so2":"0.58",
      "o3":"0.00",
      "temp":"0.30",
      "shi":"-0.25",
      "wind":"-0.22"
    },
    {
      "type":"PM2.5",
      "zong":"0.86",
      "pm25":"1.00",
      "pm10":"0.76",
      "co":"0.64",
      "no2":"0.39",
      "so2":"0.44",
      "o3":"-0.01",
      "temp":"0.24",
      "shi":"-0.09",
      "wind":"-0.16"
    },
    {
      "type":"PM10",
      "zong":"0.93",
      "pm25":"0.76",
      "pm10":"1.00",
      "co":"0.53",
      "no2":"0.54",
      "so2":"0.53",
      "o3":"-0.06",
      "temp":"0.18",
      "shi":"-0.18",
      "wind":"-0.17"
    },
    {
      "type":"CO",
      "zong":"0.60",
      "pm25":"0.64",
      "pm10":"0.53",
      "co":"1.00",
      "no2":"0.42",
      "so2":"0.42",
      "o3":"-0.29",
      "temp":"-0.06",
      "shi":"0.19",
      "wind":"-0.22"
    },
    {
      "type":"NO2",
      "zong":"0.64",
      "pm25":"0.39",
      "pm10":"0.54",
      "co":"0.42",
      "no2":"1.00",
      "so2":"0.27",
      "o3":"-0.57",
      "temp":"-0.15",
      "shi":"0.18",
      "wind":"-0.59"
    },
    {
      "type":"SO2",
      "zong":"0.58",
      "pm25":"0.44",
      "pm10":"0.53",
      "co":"0.42",
      "no2":"0.27",
      "so2":"1.00",
      "o3":"0.04",
      "temp":"0.17",
      "shi":"-0.32",
      "wind":"-0.01"
    },
    {
      "type":"O3",
      "zong":"0.00",
      "pm25":"-0.01",
      "pm10":"-0.06",
      "co":"-0.29",
      "no2":"-0.58",
      "so2":"0.04",
      "o3":"1.00",
      "temp":"0.74",
      "shi":"-0.75",
      "wind":"0.40"
    },
    {
      "type":"温度",
      "zong":"0.30",
      "pm25":"0.24",
      "pm10":"0.18",
      "co":"-0.06",
      "no2":"-0.15",
      "so2":"0.17",
      "o3":"0.74",
      "temp":"1.00",
      "shi":"-0.82",
      "wind":"0.16"
    },
    {
      "type":"湿度",
      "zong":"-0.25",
      "pm25":"-0.09",
      "pm10":"-0.18",
      "co":"0.19",
      "no2":"0.18",
      "so2":"-0.32",
      "o3":"-0.75",
      "temp":"-0.82",
      "shi":"1.00",
      "wind":"-0.28"
    },
    {
      "type":"风级",
      "zong":"-0.22",
      "pm25":"-0.16",
      "pm10":"-0.07",
      "co":"-0.22",
      "no2":"-0.59",
      "so2":"-0.01",
      "o3":"0.40",
      "temp":"0.16",
      "shi":"-0.28",
      "wind":"1.00"
    }
  ];
  this.tableContent(tableObj);
}.bind(this));

 //初始化表格
  let tableObj = [
    {
      "type":"综合指数",
      "zong":"1.00",
      "pm25":"0.86",
      "pm10":"0.93",
      "co":"0.60",
      "no2":"0.64",
      "so2":"0.58",
      "o3":"0.00",
      "temp":"0.30",
      "shi":"-0.25",
      "wind":"-0.22"
    },
    {
      "type":"PM2.5",
      "zong":"0.86",
      "pm25":"1.00",
      "pm10":"0.76",
      "co":"0.64",
      "no2":"0.39",
      "so2":"0.44",
      "o3":"-0.01",
      "temp":"0.24",
      "shi":"-0.09",
      "wind":"-0.16"
    },
    {
      "type":"PM10",
      "zong":"0.93",
      "pm25":"0.76",
      "pm10":"1.00",
      "co":"0.53",
      "no2":"0.54",
      "so2":"0.53",
      "o3":"-0.06",
      "temp":"0.18",
      "shi":"-0.18",
      "wind":"-0.17"
    },
    {
      "type":"CO",
      "zong":"0.60",
      "pm25":"0.64",
      "pm10":"0.53",
      "co":"1.00",
      "no2":"0.42",
      "so2":"0.42",
      "o3":"-0.29",
      "temp":"-0.06",
      "shi":"0.19",
      "wind":"-0.22"
    },
    {
      "type":"NO2",
      "zong":"0.64",
      "pm25":"0.39",
      "pm10":"0.54",
      "co":"0.42",
      "no2":"1.00",
      "so2":"0.27",
      "o3":"-0.57",
      "temp":"-0.15",
      "shi":"0.18",
      "wind":"-0.59"
    },
    {
      "type":"SO2",
      "zong":"0.58",
      "pm25":"0.44",
      "pm10":"0.53",
      "co":"0.42",
      "no2":"0.27",
      "so2":"1.00",
      "o3":"0.04",
      "temp":"0.17",
      "shi":"-0.32",
      "wind":"-0.01"
    },
    {
      "type":"O3",
      "zong":"0.00",
      "pm25":"-0.01",
      "pm10":"-0.06",
      "co":"-0.29",
      "no2":"-0.58",
      "so2":"0.04",
      "o3":"1.00",
      "temp":"0.74",
      "shi":"-0.75",
      "wind":"0.40"
    },
    {
      "type":"温度",
      "zong":"0.30",
      "pm25":"0.24",
      "pm10":"0.18",
      "co":"-0.06",
      "no2":"-0.15",
      "so2":"0.17",
      "o3":"0.74",
      "temp":"1.00",
      "shi":"-0.82",
      "wind":"0.16"
    },
    {
      "type":"湿度",
      "zong":"-0.25",
      "pm25":"-0.09",
      "pm10":"-0.18",
      "co":"0.19",
      "no2":"0.18",
      "so2":"-0.32",
      "o3":"-0.75",
      "temp":"-0.82",
      "shi":"1.00",
      "wind":"-0.28"
    },
    {
      "type":"风级",
      "zong":"-0.22",
      "pm25":"-0.16",
      "pm10":"-0.07",
      "co":"-0.22",
      "no2":"-0.59",
      "so2":"-0.01",
      "o3":"0.40",
      "temp":"0.16",
      "shi":"-0.28",
      "wind":"1.00"
    }
  ];
  this.tableContent(tableObj);
  $(".search1").click(function () {
    this.tableContent(tableObj);
  }.bind(this));

}

  echarts(data){
  $(".user_chart").html('<div id="myChart" style="width:100%;height: 600px;margin-top: 20px;"></div>');
    var myChart = echarts.init(document.getElementById('myChart'));
    var option = {
      title : {
        text: data.text[0]+"-"+data.text[1]+"分布图",
        left:"40%"
      },
      itemStyle:{
        normal:{
          color:"red"
        }
      },
      tooltip : {
        // trigger: 'axis',
        showDelay : 0,
        formatter : function (params) {
          if (params.value.length > 1) {
            return params.seriesName + ' <br/>'
              + data.text[0]+"："+ params.value[0]+ ' <br/>'
              + data.text[0]+"："+ params.value[1] ;
          }
          else {
            return params.seriesName + ' <br/>'
              + params.name + ' : '
              + params.value ;
          }
        },
      },
      xAxis : [
        {
          type : 'value',
          scale:true,
          axisLabel : {
            formatter: '{value}'
          },
          splitLine: {
            show: true
          }
        }
      ],
      yAxis : [
        {
          type : 'value',
          position:'right',
          scale:true,
          axisLabel : {
            formatter: '{value}'
          },
          splitLine: {
            show: true
          }
        }
      ],
      series : [
      ]
    };
    $.each(data.series,function(i,list){
      var dataObj = [list.value1,list.value2];
      var obj = {
        name : list.time,
        type:'scatter',
        data:[dataObj]
      }
      option.series.push(obj);
    })
    myChart.setOption(option);
}

  //表格
  tableContent(datas){
  let legend ='<div style="margin-top: 30px;"><p>关联度：</p><div style="width: 400px;height: 40px;background-image:-webkit-linear-gradient(to right,rgb(0,3,255),rgb(0,198,224),rgb(0,255,0),rgb(255,255,0),rgb(255,5,0)); background-image:linear-gradient(to right,rgb(0,3,255),rgb(0,198,224),rgb(0,255,0),rgb(255,255,0),rgb(255,5,0))"></div><div style="width: 400px;"><span>-1</span><span style="margin-left:50px">-0.5</span><span style="margin-left:90px ">0</span><span style="margin-left: 90px">0.5</span><span style="margin-left: 90px">1</span></div><div style="width: 400px;"><span>负相关</span><span style="margin-left: 125px">弱相关</span><span style="margin-left: 145px">正相关</span></div></div>';
  $(".user_chart").html('<div style="margin-top: 20px;"><h2 style="text-align: center;margin-bottom: 15px;">六项污染物和气象参数关联表</h2><table style="margin-bottom: 30px" class="table table-striped" id="userTable"></table>'+legend+'</div>');
    this.table = this.tableUtil.load("userTable",{
      columns: [
        {
          field: 'type',
          title: '类别',
          valign:"middle",
          halign:"center",
          width:100
        }, {
          field: 'zong',
          title: '综合指数',
          class:"allColor",
          valign:"middle",
          halign:"center",
          width:100
        }, {
          field: 'pm25',
          title: 'PM2.5',
          class:"allColor",
          valign:"middle",
          halign:"center",
          width:100
        },{
          field: 'pm10',
          title: 'PM10',
          class:"allColor",
          valign:"middle",
          halign:"center",
          width:100
        },{
          field: 'co',
          title: 'CO',
          class:"allColor",
          valign:"middle",
          halign:"center",
          width:100
        },{
          field: 'no2',
          title: 'NO2',
          class:"allColor",
          valign:"middle",
          halign:"center",
          width:100
        },{
          field: 'so2',
          title: 'NO2',
          class:"allColor",
          valign:"middle",
          halign:"center",
          width:100
        },{
          field: 'o3',
          title: 'O3',
          class:"allColor",
          valign:"middle",
          halign:"center",
          width:100
        },{
          field: 'temp',
          title: '温度',
          class:"allColor",
          valign:"middle",
          halign:"center",
          width:100
        },{
          field: 'shi',
          title: '湿度',
          class:"allColor",
          valign:"middle",
          halign:"center",
          width:100
        },{
          field: 'wind',
          title: '风级',
          class:"allColor",
          valign:"middle",
          halign:"center",
          width:100
        }
      ],
        data:datas
    });
      $(".allColor").css("background",function () {
          if($(this).text()=="1.00"){
            return "rgb(255,5,0)";
          }else if($(this).text() > "0.75"){
            return "rgb(255,76,0)";
          }else if($(this).text() > "0.50"){
            return "rgb(255,214,0)";
          }else if($(this).text() > "0.25"){
            return "rgb(204,255,0)";
          }else if($(this).text() > "0.00"){
            return "rgb(15,255,0)";
          }else if($(this).text() > "-0.25"){
            return "rgb(0,230,96)";
          }else if($(this).text() > "-0.50"){
            return "rgb(0,164,255)";
          }else{
            return "rgb(0,64,255)";
          }
      });
      $('.th-inner ').css("background","#fff");
  };

  //初始化时间插件
  initTime(){
    let timeData = moment().format("YYYY-MM-DD HH")+":00"
    this.config = {
      timePicker:true,
      timePickerIncrement:5,
      timePicker24Hour:true,
      parentEl:$(".wrapper"),
      locale:{
        format:"YYYY-MM-DD HH:00",
        separator: " 至 ",
        applyLabel : '确定',
        cancelLabel : '取消',
        fromLabel: '从',
        toLabel: '到',
        weekLabel: 'W',
        customRangeLabel: 'Custom Range',
        daysOfWeek:["日","一","二","三","四","五","六"],
        monthNames: ["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],
        firstDay:1
      },
      startDate: moment().subtract(1,"h").format("YYYY-MM-DD HH")+":00",
      endDate: timeData,
      maxDate: timeData
    };
    $("#associateDate").daterangepicker(this.config);
  }

}
